<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播demo</title>
<link rel="stylesheet" type="text/css" href="/cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"  />
<style>
.carousel-indicators li{border-color:black;}
.carousel-indicators .active{background-color: #000;}
.carousel-inner .item{text-align:center}
</style>
</head>
<body>
<div id="myCarousel" class="carousel" data-ride="carousel">
	<!-- 轮播指标 -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	<!-- 幻灯片 -->
	<div class="carousel-inner" role="listbox">
		<div class="item active" ><h1>Slide 1</h1></div>
		<div class="item"><h1>Slide 2</h1></div>
		<div class="item"><h1>Slide 3</h1></div>
	</div>
	<!-- 控件（上一个，下一个） -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	</a>
</div>

<!-- 基础的Jquery -->
<script type="text/javascript" src="/cdn.bootcss.com/jquery/3.3.1/jquery.min.js" ></script>
<!-- 基础的bootstrap -->
<script type="text/javascript" src="/cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js" ></script>
<script type="text/javascript">
	$(function(){
		// 从左到右循环播放
		$("#myCarousel").carousel('cycle');
	});
</script>
</body>
</html>